import React, { Component } from 'react';
import { observable, action } from 'mobx';
import { observer } from 'mobx-react';

import styles from './PutSuperForm.scss';

import initView from '@/cross/components/View';
const View = initView(styles);
import initText from '@/cross/components/Text';
const Text = initText(styles);
import initImage from '@/cross/components/Image';
const Image = initImage(styles);
import initScrollView from '@/cross/components/ScrollView';
const ScrollView = initScrollView(styles);
import initImageBackground from '@/cross/components/ImageBackground';
const ImageBackground = initImageBackground(styles);

import { Page, HeaderBar, TabItem, Button, AutoForm } from '@/cross/components';
import FormSchemaEditor from '../components/FormWidget/FormSchemaEditor';

import { CrossPageProps } from '@/cross/pages/PropType';
import { ISuperForm } from '../types';
import { AutoFormParams } from '@/types/utils/form';
import { $service, $message } from '@/cross/utils';

interface IProps extends CrossPageProps {
  params: {
    item?: ISuperForm;
    onSave?: () => void;
  };
}

@observer
class PageView extends Component<IProps> {
  @observable tab = 0;
  @action changeTab = (val: number) => {
    this.tab = val;
  };

  autoFormRef = React.createRef<AutoForm<ISuperForm>>();
  formValue: ISuperForm = {};
  formConfig: AutoFormParams<ISuperForm> = {
    // triggerOnBlurFields: [''],
    rule: {
      title: {
        required: true,
        message: '请输入图文标题',
      },
    },
    fields: [
      {
        type: 'string',
        field: 'title',
        widget: 'text',
        label: '标题',
        widgetProps: { placeholder: '请输入图文标题 不找过30个文字' },
      },
    ],
  };

  componentDidMount() {
    if (this.props.params.item) {
      let form = this.autoFormRef.current?.form;
      form?.setValue({ ...this.props.params.item });
    }
  }

  submit = () => {
    let form = this.autoFormRef.current?.form;
    form &&
      form
        .validate()
        .then(async () => {
          $service('rest', 'put', {
            tableName: 'article',
            ...form?.value,
          })
            .then(() => {
              $message.success('已保存');
              this.props.params.onSave && this.props.params.onSave();
              this.props.navigation && this.props.navigation.goBack();
            })
            .catch((e) => {
              if (e && e.errmsg) $message.error(e.errmsg);
            });
        })
        .catch((e) => {
          if (e && e.message) {
            $message.error(e.message);
          }
        });
  };

  render() {
    return (
      <Page {...this.props}>
        <HeaderBar
          title={`${this.props.params.item ? '编辑' : '新建'}表单`}
          titleAlign="left"
          mode="light"
          leftContent={null}
          showBack
        />
        <ScrollView className="M-b-c-w">
          <View className="M-p-h-b-20 M-p-v-b-10">
            <AutoForm<ISuperForm>
              ref={this.autoFormRef}
              value={this.formValue}
              config={this.formConfig}
            />
            <View className="M-p-t-10">
              <FormSchemaEditor value={'' as any} />
            </View>
            <View className="M-flexbox-horizontal M-horizontal-right M-p-t-10">
              <Button onClick={this.props.navigation?.goBack} color="gray" className="M-m-r-10">
                取消
              </Button>
              <Button onClick={this.submit}>保存</Button>
            </View>
          </View>
          <View className="M-p-t-5" />
        </ScrollView>
      </Page>
    );
  }
}

export default PageView;
